<template>
	<view class="vip-pay-page">
		<!-- 课程信息展示区域 -->
		<view class="price-section">
			<!-- 课程信息卡片 -->
			<view class="course-card">
				<!-- 课程图片 -->
				<view class="course-image">
					<image :src="paramObj.facePohoto" class="course-img" mode="aspectFill"></image>

				</view>
				<!-- 课程详情 -->
				<view class="course-details">
					<view class="course-name">{{paramObj.faceName || '' }}</view>
					<view class="course-time">{{paramObj.selectedTimeTime || '' }}</view>
				</view>
				
				<!-- 价格 -->
				<view class="course-price">¥ {{paramObj.teachPrice || '' }}</view>
			</view>
		</view>

		<!-- 优惠信息 -->
		<!-- <view class="benefit-section">
			<view class="benefit-item">
				<view class="benefit-label">抖音优惠券</view>
				<view class="benefit-value">无可用优惠券 ></view>
			</view>
		</view> -->
		<!-- 积分模块 -->
		<view class="points-section" @click="togglePointsUsage">
			<view class="section-content">
				<text class="section-title">积分</text>
				<text class="points-balance">余额: {{ userPoints }}</text>
			</view>
			<view class="points-checkbox">
				<view class="checkbox-btn" :class="{ active: usePoints }">
					<wd-icon v-if="usePoints" name="check" size="12px" color="#fff"></wd-icon>
				</view>
			</view>
		</view>

		<!-- 支付方式选择 -->
		<view class="payment-methods">
			<view 
				v-for="method in paymentMethods" 
				:key="method.id" 
				class="payment-method"
				@click="selectPaymentMethod(method)"
			>
				<view class="method-info">
					<image :src="method.icon" class="method-icon"></image>
					<text class="method-name">{{ method.name }}</text>
				</view>
				<view class="method-radio">
					<view class="radio-btn" :class="{ active: selectedPaymentMethod?.id === method.id }">
						<wd-icon v-if="selectedPaymentMethod?.id === method.id" name="check" size="12px" color="#fff"></wd-icon>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部支付按钮 -->
		<view class="bottom-bar">
			<wd-button 
				custom-class="pay-button" 
				:loading="loading" 
				@click="handlePayment"
				:disabled="!selectedPaymentMethod"
			>
				立即支付 
			</wd-button>
		</view>
	</view>
</template>

<script setup>
	const paramObj = ref({});
    const loading = ref(false);
	const isStatus = ref(0); //是否支持免密
	// 响应式数据
	const selectedPaymentMethod = ref({
		id: 1,
		name: '微信支付',
		icon: '/pagesA/static/wxpay.png'
	})
	
	// 支付方式列表
	const paymentMethods = ref([
		{
			id: 1,
			name: '微信支付',
			icon: '/pagesA/static/wxpay.png'
		}
	])

	// 积分相关数据
	const userPoints = ref(0) // 用户积分余额
	const usePoints = ref(false) // 是否使用积分

	// 选择支付方式
	const selectPaymentMethod = (method) => {
		selectedPaymentMethod.value = method
	}

	// 切换积分使用状态
	const togglePointsUsage = () => {
		usePoints.value = !usePoints.value
	}

	// 处理支付
	const handlePayment = async () => {
		loading.value = true
		// 1=现金支付；3=积分支付；4=现金&积分支付；
		const totalAmount = paramObj.value.teachPrice;
		let payType = 1;
		let payCash = totalAmount;
		if(usePoints.value && userPoints.value>=totalAmount){//如果选了 且 积分大于或等总金额
			payType = 3;
		}else if(usePoints.value && userPoints.value>0 && userPoints.value<totalAmount){//如果选了 且 积分大于0 且 积分小于总金额
			payType = 4;
			// 保留两位小数且四舍五入
			payCash = (totalAmount - userPoints.value).toFixed(2);
		}else{//如果未选择积分支付，或者用户积分不足
			payType = 1;
		}
		if(isStatus?.value==1){ // 免密支付
			payType = 2;
		}
		const param = {
			classId:paramObj.value.classId,
			faceImgUrl:paramObj.value.faceImgUrl,
			hasOldFaceImg:paramObj.value.hasOldFaceImg,
			idcard:paramObj.value.idcard,
			mobile:paramObj.value.mobile,
			name:paramObj.value.name,
			urgentLinker:paramObj.value.urgentLinker,
		}
		const res = await uni.api.createTeamOrder({
			payChannel:'wx_lite',
			payType:payType,
			...param,
		});
		if(res.code==0){
			if(isStatus?.value==1){ // 免密支付
				uni.showToast({
					title: '支付成功',
					icon: 'none'
				})
				setTimeout(()=>{
					uni.redirectTo({
						url: `/pagesA/view/course/myCourse`
					})
				},300)
				return
			}
			if(payType==3){//积分支付 不支付
				uni.showToast({
					title: '支付成功',
					icon: 'none'
				})
				setTimeout(()=>{
					uni.redirectTo({
						url: `/pagesA/view/course/myCourse`
					})
				},300)
				return
			}
			const changeInfo = JSON.parse(res.data.changeInfo);
			const res2 = await uni.api.getIntegral({
				payCash:payCash,
				queryType:2
			});
			if (res2.code==0) {
				uni.showLoading({
					title: '支付中...'
				})
				uni.showModal({
					title: '支付提示',
					content: `本单可奖励${res2?.data}积分`,
					showCancel:false,
					success:  (res)=> {
						if (res.confirm) {
							uni.pingpp.createPayment(changeInfo, function(result, err) {
								if (result == "success") {
									uni.showToast({
										title: '支付成功',
										icon: 'none'
									})
									setTimeout(()=>{
										uni.redirectTo({
											url: `/pagesA/view/course/myCourse`
										})
									},300)
								}
								uni.hideLoading()
							});
						}
					}
				});
			}else{
				uni.hideLoading()
				uni.showToast({
					title: '支付失败',
					icon: 'none'
				})
			}
		}else{
			uni.hideLoading()
			uni.showToast({
				title: res.message,
				icon: 'none'
			})
		}
		loading.value = false
	}
		//获取积分
	const myIntegral = async () => {
		const res = await uni.api.myIntegral();
		if(res.code==0){
			userPoints.value = res.data?.surplusIntegral || 0;
		}
	}
	//calss == 3 获取开通状态
	const getTeam = async () => {
		const res = await uni.api.getTeamVipEndAt({venueId:paramObj.value.venueId});
		if(res.code==0){
			isStatus.value = res.data?.status || 0;
		}
	}
	onLoad((opt) => {
		myIntegral();
		const param = JSON.parse(opt.param);
		paramObj.value = param;
		if(paramObj.value.classType==3){
			getTeam();
		}
	})
</script>

<style scoped lang="scss">
	.vip-pay-page {
		min-height: 100vh;
		background: #f5f5f5;
		padding-bottom: 120rpx;
	}


	/* 课程信息展示区域 */
	.price-section {
		background: #fff;
		padding: 30rpx;
		margin-bottom: 20rpx;
		position: relative;
		.course-card {
			display: flex;
			align-items: center;
			border-radius: 12rpx;
			padding: 24rpx;
			.course-image {
				width: 120rpx;
				height: 120rpx;
				margin-right: 24rpx;
				
				.course-img {
					width: 100%;
					height: 100%;
					border-radius: 8rpx;
					background-color: #f5f5f5;
				}
			}
			
			.course-details {
				flex: 1;
				
				.course-name {
					font-size: 32rpx;
					color: #333;
					font-weight: 500;
					margin-bottom: 12rpx;
				}
				
				.course-time {
					font-size: 28rpx;
					color: #666;
				}
			}
			
			.course-price {
				font-size: 36rpx;
				color: #ff6b35;
				font-weight: 600;
			}
		}
		
		.user-avatar {
			position: absolute;
			top: 30rpx;
			right: 30rpx;
			width: 60rpx;
			height: 60rpx;
			
			.avatar-img {
				width: 100%;
				height: 100%;
				border-radius: 50%;
				background-color: #f5f5f5;
			}
		}
	}

	/* 优惠信息 */
	.benefit-section {
		background: #fff;
		margin-bottom: 20rpx;

		.benefit-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 32rpx;
			border-bottom: 1px solid #f0f0f0;

			&:last-child {
				border-bottom: none;
			}

			.benefit-label {
				font-size: 28rpx;
				color: #333;
			}

			.benefit-value {
				font-size: 28rpx;
				color: #666;
			}
		}
	}

	/* 积分模块 */
	.points-section {
		background: #fff;
		padding: 32rpx;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.section-content {
			display: flex;
			align-items: center;

			.section-title {
				font-size: 28rpx;
				color: #333;
			}

			.points-balance {
				font-size: 24rpx;
				color: #666;
				margin-left: 16rpx;
			}
		}

		.points-checkbox {
			.checkbox-btn {
				width: 38rpx;
				height: 38rpx;
				border: 2px solid #ddd;
				border-radius: 38rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				transition: all 0.3s ease;

				&.active {
					background: #000000;
					border-color: #000000;
				}
			}
		}
	}

	/* 支付方式 */
	.payment-methods {
		background: #fff;
		margin-bottom: 20rpx;

		.payment-method {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 32rpx;
			border-bottom: 1px solid #f0f0f0;

			&:last-child {
				border-bottom: none;
			}

			.method-info {
				display: flex;
				align-items: center;

				.method-icon {
					width: 48rpx;
					height: 48rpx;
					margin-right: 24rpx;
				}

				.method-name {
					font-size: 28rpx;
					color: #333;
				}
			}

			.method-radio {
				.radio-btn {
					width: 40rpx;
					height: 40rpx;
					border: 2px solid #ddd;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					transition: all 0.3s ease;

					&.active {
						background: #07c160;
						border-color: #07c160;
					}
				}
			}
		}
	}

	/* 底部支付按钮 */
	.bottom-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: #fff;
		padding: 24rpx 32rpx;
		box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
		z-index: 999;
		box-sizing: border-box;
	}

	:deep(.pay-button) {
		width: 100% !important;
		height: 88rpx !important;
		background: #000 !important;
		border-radius: 44rpx !important;
		font-size: 32rpx !important;
		font-weight: 500 !important;
	}
</style>